<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式</title>
</head>

<body>
  <div id="app">
    <p>{{num}}</p>
    <!-- <p>{{a}}</p> -->
    <button @click="num++">按钮1</button>
    <!-- <button @click="a++">按钮2</button> -->

    <ul>
      <li v-for="value,key in person" :key="key">
        {{key}} - {{value}}
      </li>
    </ul>
    <button @click="add">添加属性</button>

    <ul>
      <li v-for="person, index in persons" :key="index">
        {{person.name}}
      </li>
    </ul>
    <button @click="addPerson">添加数据</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    /*
      响应式：更新数据，数据变，用户界面也变化
      
      在Vue中什么样的数据是响应式的？
        data中所有数据
        所以：在Vue中，借助响应式来完成用户界面更新
        （用户界面要发生变化，只要更新data数据即可）
      
        data中所有原有数据都是响应式的，新增加不是
          如果对象新增加属性要想是响应式：this.$set()
          如果数组新增加数据要想是响应式：数组变更方法 push\splice...
    */
    new Vue({
      el: '#app',
      data() {
        // 直接给this添加数据，不是响应式的
        // this.a = 1
        return {
          num: 0,
          person: {
            name: 'jack',
            age: 18
          },
          persons: [
            { name: 'jack' },
            { name: 'rose' },
          ]
        }
      },
      methods: {
        add() {
          // 说明：data中数据所有原有属性都是响应式，新增加的不是
          // this.person.age++ // 是响应式
          // this.person.gender = '男' // 不是响应式
          // Vue提供一个方法让新增属性变成响应式
          this.$set(this.person, 'gender', '男') // 是响应式
        },
        addPerson() {
          // this.persons[this.persons.length] = { name: 'xxx' } // 不是响应式
          // https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
          // vue对数组的部分方法进行重新定义，定义成了响应式
          this.persons.push({ name: 'xxx' }) // 是响应式
        }
      }
    })
  </script>
</body>

</html>